import Vue from 'vue'
import App from './App.vue'
import router from './router'

/* ------------- 完整导入 vant 组件库 -------------- */
// 引入 vant 所有的组件
// import Vant from 'vant';
// 引入全局样式
// import 'vant/lib/index.css';
// 将 vant 安装为 vue 的插件
// Vue.use(Vant);

/** ------------- 按需导入 vant 组件库 -------------- **/
import { 
  Button,
  Icon,
  Tabbar,
  TabbarItem,
  NavBar,
  Form,
  Field,
  Toast,
  Cell,
  CellGroup,
  List,
  Grid,
  GridItem
} from 'vant';
// 将 Button 组件安装为 vue 的插件
Vue.use(Button)
Vue.use(Icon)
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(NavBar);
Vue.use(Form);
Vue.use(Field);
Vue.use(Toast);
Vue.use(Cell);
Vue.use(CellGroup)
Vue.use(List);
Vue.use(Grid)
Vue.use(GridItem)

// 轻提示两种用法
// 1. 直接使用 Toast 调用
// Toast.success('登录成功')

// 2. 在组件中使用 this.$toast 调用
// this.$toast.success('登录成功') 

// 内部原理：
// Toast 内部实现：Vue.prototype.$toast = Toast
// 组件的 this 可以继承到 Vue 原型身上的所有属性和方法。
// 所以在 Vue.prototype 上挂载的东西都可以被组件的 this 拿到
// 在 js 文件中，不能使用 this.$toast.success('登录成功') ，只有在 vue 组件中可以使用

// 将文章列表的一条内容注册成全局组件
import ArticleItem from '@/components/ArticleItem.vue'
Vue.component('ArticleItem', ArticleItem)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
